<script setup lang="ts">
  import { ref } from 'vue';

  interface Note {
    id: number;
    text: string;
    x: number;
    y: number;
    width: number;
    height: number;
  }

  const notes = ref<Note[]>([
    {
      id: 1,
      text: '欢迎使用桌面便签应用！\n点击这里编辑内容。',
      x: 100,
      y: 100,
      width: 200,
      height: 150
    }
  ]);

  // 用于跟踪当前正在拖拽的便签
  const draggingNote = ref<number | null>(null);
  const dragOffset = ref({ x: 0, y: 0 });

  const newNote = () => {
    notes.value.push({
      id: Date.now(),
      text: '新的便签\n点击编辑',
      x: Math.random() * 300,
      y: Math.random() * 200,
      width: 200,
      height: 150
    });
  };

  const deleteNote = (id: number) => {
    notes.value = notes.value.filter(note => note.id !== id);
  };

  const bringToFront = (id: number) => {
    const note = notes.value.find(n => n.id === id);
    if (note) {
      // 将选中的便签移到数组末尾（最后渲染，显示在最前面）
      notes.value = [...notes.value.filter(n => n.id !== id), note];
    }
  };

  // 开始拖拽
  const startDrag = (id: number, event: MouseEvent) => {
    const note = notes.value.find(n => n.id === id);
    if (note) {
      draggingNote.value = id;
      // 计算鼠标点击位置与便签左上角的偏移量
      dragOffset.value = {
        x: event.clientX - note.x,
        y: event.clientY - note.y
      };
      bringToFront(id);
    }
  };

  // 拖拽过程中更新便签位置
  const onDrag = (event: MouseEvent) => {
    if (draggingNote.value !== null) {
      const note = notes.value.find(n => n.id === draggingNote.value);
      if (note) {
        note.x = event.clientX - dragOffset.value.x;
        note.y = event.clientY - dragOffset.value.y;
      }
    }
  };

  // 结束拖拽
  const stopDrag = () => {
    draggingNote.value = null;
  };

  // 在 mounted 时添加事件监听器
  import { onMounted, onUnmounted } from 'vue';

  onMounted(() => {
    window.addEventListener('mousemove', onDrag);
    window.addEventListener('mouseup', stopDrag);
  });

  onUnmounted(() => {
    window.removeEventListener('mousemove', onDrag);
    window.removeEventListener('mouseup', stopDrag);
  });
</script>

<template>
  <div class="desktop-notes">
    <!-- 控制面板 -->
    <div class="control-panel">
      <button @click="newNote" class="control-button">+</button>
    </div>

    <!-- 便签列表 -->
    <div
      v-for="note in notes"
      :key="note.id"
      class="note"
      :style="{
        left: note.x + 'px',
        top: note.y + 'px',
        width: note.width + 'px',
        height: note.height + 'px'
      }"
      @mousedown="bringToFront(note.id)"
    >
      <div class="note-header" @mousedown="startDrag(note.id, $event)">
        <button @click="deleteNote(note.id)" class="delete-btn">×</button>
      </div>
      <textarea
        v-model="note.text"
        class="note-content"
        :style="{ width: note.width - 20 + 'px', height: note.height - 40 + 'px' }"
        @mousedown.stop
      />
    </div>
  </div>
</template>
<style>
  html,
  body,
  #app {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
  }
</style>

<style scoped>
  .desktop-notes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: transparent;
    pointer-events: none; /* 禁用鼠标事件 */
    user-select: none; /* 防止拖拽时选择文本 */
  }

  .control-panel {
    pointer-events: auto;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
  }

  .control-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.2);
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
  }

  .control-button:hover {
    background-color: rgba(255, 255, 255, 1);
  }

  .note {
    /* 允许鼠标事件 */
    pointer-events: auto;
    position: absolute;
    border-radius: 8px;
    background-color: rgba(255, 255, 200, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 10px;
    cursor: move;
    display: flex;
    flex-direction: column;
      -webkit-app-region: drag; 
  }

  .note-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 5px;
    cursor: move; /* 显示移动光标 */
        -webkit-app-region: no-drag; 
  }

  .delete-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 0, 0, 0.7);
    color: white;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    -webkit-app-region: no-drag; /* 删除按钮不可拖拽 */
  }

  .delete-btn:hover {
    background-color: rgba(255, 0, 0, 1);
  }

  .note-content {
    flex: 1;
    background-color: transparent;
    border: none;
    resize: none;
    outline: none;
    font-size: 14px;
    font-family: inherit;
    color: #333;
    overflow: auto;
    background: transparent;
    -webkit-app-region: no-drag; /* 内容区域不可拖拽 */
  }

  .note-content::-webkit-scrollbar {
    width: 6px;
  }

  .note-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
</style>
